<template>
	<view class="content">
		<!-- 轮播图 -->
		<view class="swiper">
			<u-swiper height="180" :list="swiperList" keyName="imgPath" @click="swiperClick" indicator
				indicatorMode="line"></u-swiper>
		</view>
		<view class="tab-header">
			<van-tabs :active="tabActive" @change="onChange" sticky animated swipeable color="#1999dc">
				<van-tab title="活动" name="act">
					<view class="wrap">
						<view v-for="(item, index) in actList" :key="index" @click="itemClick(item)">
							<activityItem :actItem="item"></activityItem>
						</view>
						<u-loadmore :status="actStatus" />
					</view>
				</van-tab>
				<van-tab title="比赛" name="march">
					<view class="wrap">
						<view v-for="(item, index) in marchList" :key="index" @click="itemClick(item)">
							<activityItem :actItem="item"></activityItem>
						</view>
						<u-loadmore :status="marchStatus" />
					</view>
				</van-tab>
			</van-tabs>
		</view>
		<login ref="login" @refresh="refresh"></login>
	</view>
</template>

<script>
	import {
		getToken
	} from '@/utils/auth.js'
	import {
		getAllACTImg,
		getACTList,
		getMarchList,
		getUserInfo
	} from '../../config/api.js';
	import activityItem from '@/components/activityItem.vue'

	import {
		envURL
	} from '@/utils/env.js'

	import {
		mapState,
		mapGetters,
		mapActions
	} from 'vuex'

	export default {
		components: {
			activityItem
		},
		data() {
			return {
				isLogined: false,
				swiperList: [],
				list1: [{
					name: '活动'
				}, {
					name: "比赛"
				}],
				tabActive: 'act',
				actStatus: 'loadmore',
				marchStatus: 'loadmore',
				actList: [],
				marchList: [],
				actPage: 1,
				actCount: 0,
				marchPage: 1,
				marchCount: 0,
				actLimit: 5,
				marchLimit: 5
			}
		},
		computed: {
			...mapGetters([
				'name',
				'avatar',
				'roleCode'
			])
		},
		onLoad() {

		},
		methods: {
			...mapActions(['login', 'setInfo', 'logout']),
			// 获取轮播图图片
			async getACTImgFn() {
				const res = await getAllACTImg({
					params: {
						limit: 5
					}
				})
				console.log(res);
				this.swiperList = []
				res.data.forEach(item => {
					let swiperObj = {}
					swiperObj.actId = item.actId
					swiperObj.imgPath = envURL + item.imgPath
					this.swiperList.push(swiperObj)
				})
			},
			// 获取活动列表
			async getACTListFn() {
				const res = await getACTList({
					params: {
						limit: this.actLimit,
						offect: this.actPage,
						actType: 0,
						approvalStatus: 1
					}
				})
				this.actList = res.data.resList
				this.actCount = res.data.count
				if (this.actPage * this.actLimit >= this.actCount) {
					this.actStatus = 'nomore';
				}
				uni.stopPullDownRefresh()
			},
			// 获取比赛列表
			async getMarchListFn() {
				const res = await getMarchList({
					params: {
						limit: this.marchLimit,
						offect: this.marchPage,
						actType: 1,
						approvalStatus: 1
					}
				})
				this.marchList = res.data.resList
				this.marchCount = res.data.count
				if (this.marchPage * this.marchLimit >= this.marchCount) {
					this.marchStatus = 'nomore';
				}
			},
			// 轮播图被点击
			swiperClick(index) {
				if (!this.isLogined) {
					this.$refs.login.showFlag = true
				} else {
					// 获取当前图片的所属活动id
					let actId = this.swiperList[index].actId
					uni.navigateTo({
						url: `/pages/activityDetail/activityDetail?actId=${actId}`
					});
				}
			},
			itemClick(item) {
				if (!this.isLogined) {
					this.$refs.login.showFlag = true
				} else {
					uni.navigateTo({
						url: `/pages/activityDetail/activityDetail?actId=${item.actId}`
					});
				}
			},
			onChange(event) {
				this.tabActive = event.detail.name
			},
			// 触底
			async onReachBottom() {
				if (this.tabActive === 'act') {
					// 活动触底
					if (this.actPage * this.actLimit >= this.actCount) {
						this.actStatus = 'nomore';
						return;
					}
					this.actStatus = 'loading';
					this.actPage = ++this.actPage;
					// 请求新数据
					const actRes = await getACTList({
						params: {
							limit: this.actLimit,
							offect: this.actPage,
							actType: 0,
							approvalStatus: 1
						}
					})
					this.actList.push(...actRes.data.resList)
					// 判断是否请求完数据
					if (this.actPage * this.actLimit >= this.actCount) this.actStatus = 'nomore';
					else this.actStatus = 'loading';

				} else if (this.tabActive === 'march') {
					// 比赛触底
					if (this.marchPage * this.marchLimit >= this.marchCount) {
						this.marchStatus = 'nomore';
						return;
					}
					this.marchStatus = 'loading';
					this.marchPage = ++this.marchPage;
					// 请求新数据
					const marchRes = await getMarchList({
						params: {
							limit: this.marchLimit,
							offect: this.marchPage,
							actType: 1,
							approvalStatus: 1
						}
					})
					this.marchList.push(...marchRes.data.resList)
					if (this.marchPage * this.marchLimit >= this.marchCount) this.marchStatus = 'nomore';
					else this.marchStatus = 'loading';
				}
			},
			initPage() {
				this.actLimit = 5
				this.actPage = 1
				this.marchLimit = 5
				this.marchPage = 1
				this.getACTImgFn()
				this.getACTListFn()
				this.getMarchListFn()
			},

			async setInfoFn() {
				const infoRes = await getUserInfo()
				if (infoRes.code === 90008 || infoRes.code === 90014) {
					// 登录用户
					this.isLogined = false
				} else {
					this.setInfo(infoRes.data)
					this.isLogined = true
				}
			},

			async refresh() {
				await this.setInfoFn()
			},
			onShow() {
				this.setInfoFn()
			}
		},
		onPullDownRefresh() {
			this.initPage()
			this.timer = setInterval(() => {

			}, 2000);

		},
		onLoad() {
			this.initPage()
		}
	}
</script>

<style lang="scss">
	.content {}

	.logo {
		height: 200rpx;
		width: 200rpx;
		margin-top: 200rpx;
		margin-left: auto;
		margin-right: auto;
		margin-bottom: 50rpx;
	}

	.text-area {
		display: flex;
		justify-content: center;
	}

	.title {
		font-size: 36rpx;
		color: #8f8f94;
	}

	.tab-header {}

	.wrap {
		height: 100%;
		padding: 24rpx;
	}
</style>